<template>
	<view class="member">
		<base-navbar back-color="#fff" title="会员统计"></base-navbar>
		<view class="header">
			<view class="statistics">
				<view class="item">
					<text class="label">会员总数</text>
					<view class="value">
						{{info.member_total}}
						<text class="unit">人</text>
					</view>
				</view>
				<view class="item">
					<view class="inner">
						<text class="label">累计总消费</text>
						<view class="value">
							<text class="unit">￥</text>
							{{info.money_total}}
							<text class="unit">元</text>
						</view>
					</view>
					<view class="icon-wrap">
						<uni-icons type="icon-tuandui" custom-prefix="iconfont" size="36" color="#ff6a11"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="member-list">
			<c-empty v-if="memberList.length==0"></c-empty>
			<view class="item" v-for="(item,index) in memberList" :key="index">
				<view class="time">
					{{item.create_time}}
				</view>
				<view class="user" @click="detailed(item)">
					<image class="avatar" :src="item.member.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="name">
							{{item.member?item.member.nickname:'会员不存在'}}
						</view>
						<view class="desc">
							累计消费：{{item.consumption}}元
						</view>

					</view>
					<image class="phone" v-if="item.member && item.member.mobile"
						@click.stop="callMobile(item.member.mobile)" :src="web_host + '/static/images/icon-phone.png'">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const web_host = inject('web_host');

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		info: {
			member_total: 0,
			money_total: 0,
		},
		memberList: [],
		isMore: false,
	});

	onLoad((opt) => {
		getStoreMemberList();
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
		if (state.isMore) {
			getStoreMemberList();
		}
	});

	function getStoreMemberList() {
		request.get('assistant/getStoreMemberList', {
			skip: state.memberList.length,
			limit: 10,
		}).then(res => {
			state.isMore = res.data.is_more;
			state.info.member_total = res.data.member_total;
			state.info.money_total = res.data.money_total;
			if (state.memberList.length == 0) {
				state.memberList = res.data.data;
			} else {
				state.memberList = state.memberList.concat(res.data.data);
			}
		})
	}

	//消费明细
	function detailed(item) {
		if (item.member) {
			pageRoute('/pages/merchant/member-consumption?member_id=' + item.member_id)
		} else {
			uni.showToast({
				title: '会员不存在',
				icon: "error"
			})
		}
	}

	//拨打电话
	function callMobile(mobile) {
		uni.makePhoneCall({
			phoneNumber: mobile
		});
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		info,
		memberList,
		isMore,
	} = toRefs(state);
</script>

<style lang="scss">
	.member {
		.header {
			position: sticky;
			/* #ifdef H5 */
			top: var(--window-top);
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 9;
			background-color: #fff;
			padding: $m24 $m24;

			.statistics {
				@include f-between;
				overflow: hidden;
				height: 198rpx;
				background: #fef7f1;
				border-radius: $radius-12;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 100%;

					&:nth-child(1) {
						flex: 2;

						.label,
						.value,
						.unit {
							color: $u-type-warning !important;
						}
					}

					&:nth-child(2) {
						position: relative;
						flex: 3;
						background: linear-gradient(to right, #ff971f, #ff6a11);
						border-radius: $radius-12;
						transform: translateX(30rpx) skewX(-5deg);

						.inner {
							transform: skewX(5deg);
						}

						.icon-wrap {
							@include f-center;
							position: absolute;
							top: 50%;
							left: -38rpx;
							width: 76rpx;
							height: 76rpx;
							background-color: #ff971f;
							border-radius: $radius-100;
							border: 12rpx solid #fff4ec;
							transform: translateY(-50%);
							box-shadow: 0 0 6rpx 2rpx mix(#fff, #f5a05e, 60%);
						}

						.label,
						.value {
							color: #fff;
						}
					}

					.label {
						font-size: $font-24;
					}

					.value {
						font-size: $font-48;
						font-weight: bold;

						.unit {
							font-size: $font-24;
							color: #fff;
						}
					}
				}
			}
		}

		.member-list {
			overflow: hidden;
			margin-top: $m24;

			.item {
				padding: $m24;
				margin-bottom: $m24;
				background-color: #fff;

				.time {
					position: relative;
					padding: 0 $m12 $m12;
					font-size: $font-24;
					color: $u-tips-color;

					&::before {
						position: absolute;
						left: 0;
						top: calc(50% - 8rpx);
						width: 6rpx;
						height: 48%;
						content: '';
						transform: translateY(-50%);
						background-color: $u-type-warning;
						border-radius: 3rpx;
					}
				}

				.user {
					@include f-between;

					.avatar {
						width: 84px;
						height: 84px;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						margin: 0 $m24;

						.name {
							color: $u-main-color;
							font-weight: bold;
							font-size: $font-30;
						}

						.desc {
							font-size: $font-24;
							color: $u-tips-color;
						}

					}

					.phone {
						width: 32px;
						height: 32px;
					}
				}
			}
		}
	}

	::v-deep .uni-date__x-input {
		padding-right: 10rpx;
	}
</style>